<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图书信息</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
  </style>
</head>
<body>
<div id="app">
  <h1>图书信息</h1>

  <button @click="displayBooks">显示所有图书</button>
  <button @click="displayAvailableBooks">显示可借图书</button>
  <button @click="displayUnavailableBooks">显示不可借图书</button>
  <button @click="showAddBookModal">添加图书</button>
  <label for="searchTitle">按书名查询:</label>
  <input v-model="searchTitle" type="text" id="searchTitle">
  <button @click="searchByTitle">查询</button>

  <table>
    <tr>
      <th>书名</th>
      <th>作者</th>
      <th>出版社</th>
      <th>类型</th>
      <th>库存</th>
      <th>简介</th>
      <th>操作</th>
    </tr>
    <tr v-for="book in books" :key="book.title">
      <td>{{ book.title }}</td>
      <td>{{ book.author }}</td>
      <td>{{ book.publisher }}</td>
      <td>{{ book.categoryId == 1 ? "文学类" : (book.categoryId == 2 ? "历史类" :
              (book.categoryId == 3 ? "计算机类" : (book.categoryId == 4 ? "科学类" :
                      (book.categoryId == 5 ? "生活杂志" : (book.categoryId == 6 ? "南昌时尚":
                              (book.categoryId == 7 ? "食品安全" : "医学类"))))))}}</td>
      <td>{{ book.stock }}</td>
      <td>{{ book.description }}</td>
      <td>
        <button @click="deleteBook(book)">删除</button>
        <button @click="startEditing(book)">修改</button>
      </td>
    </tr>
  </table>
  <div>
    <label for="pageInput">页码：</label>
    <input type="number" id="pageInput" v-model.number="currentPage" min="1">
    <button @click="changePage(currentPage)">跳转</button>
  </div>
  <div>
    <label for="itemsPerPageSelect">每页条数：</label>
    <select id="itemsPerPageSelect" v-model.number="itemsPerPage" @change="changeItemsPerPage(itemsPerPage)">
      <option value="10">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <!-- 需要根据需求添加更多选项 -->
    </select>
  </div>
  <!-- 编辑模态框 -->
  <div v-if="editingBook" class="modal">
    <div class="modal-content">
      <h2>编辑图书信息</h2>
      <table>
        <tr>
          <td>书名</td>
          <td><input v-model="tempBook.title" type="text"></td>
        </tr>
        <tr>
          <td>作者</td>
          <td><input v-model="tempBook.author" type="text"></td>
        </tr>
        <tr>
          <td>出版社</td>
          <td><input v-model="tempBook.publisher" type="text"></td>
        </tr>
        <tr>
          <td>库存</td>
          <td><input v-model="tempBook.stock" type="text"></td>
        </tr>
        <tr>
          <td>简介</td>
          <td><textarea v-model="tempBook.description"></textarea></td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <button @click="saveBookChanges">保存</button>
            <button @click="cancelEdit">取消</button>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <!-- 添加图书模态框 -->
  <div v-if="showAddBook" class="modal2">
    <div class="modal-content">
      <h2>添加图书</h2>
      <table>
        <tr>
          <td>书名</td>
          <td><input v-model="newBook.title" type="text"></td>
        </tr>
        <tr>
          <td>作者</td>
          <td><input v-model="newBook.author" type="text"></td>
        </tr>
        <tr>
          <td>出版社</td>
          <td><input v-model="newBook.publisher" type="text"></td>
        </tr>
        <tr>
          <td>库存</td>
          <td><input v-model="newBook.stock" type="text"></td>
        </tr>
        <tr>
          <td>简介</td>
          <td><textarea v-model="newBook.description"></textarea></td>
        </tr>
        <tr>
          <td>类别</td>
          <td>
            <select v-model="newBook.categoryId">
              <option value="1">文学类</option>
              <option value="2">历史类</option>
              <option value="3">计算机类</option>
              <option value="4">科学类</option>
              <option value="5">生活杂志</option>
              <option value="6">南昌时尚</option>
              <option value="7">食品安全</option>
              <option value="8">医学类</option>
            </select>
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <button @click="addBook">添加</button>
            <button @click="cancelAddBook">取消</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .modal,.modal2{
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .modal-content,.modal2 .modal-content {
    background-color: #fefefe;
    margin:  auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
  }
</style>

<script>
  new Vue({
    el: '#app',
    data: {
      currentPage: 1,
      itemsPerPage: 10,

      books: [],
      editingBook: null,
      tempBook: null,
      showAddBook: false, // 控制添加图书模态框的显示与隐藏
      newBook: {
        title: '',
        author: '',
        publisher: '',
        stock: '',
        description: '',
        categoryId: '',
      },
      searchTitle: '', // 保存搜索输入框的值
    },
    methods: {

      searchByTitle() {
        // 发送按书名查询图书的AJAX请求
        $.ajax({
          url: "/book/getBookByTitle",
          type: "GET",
          data: { title: this.searchTitle }, // 将搜索书名作为参数传递
          success: (data) => {
            this.books = data;
          }
        });
      },
      /*displayBooks() {
        $.ajax({
          url: "/book/getAllBooks",
          type: "GET",
          success: (data) => {
            this.books = data;
          }
        });
      },*/
      changePage(page) {
        this.currentPage = page;
        this.displayBooks();
      },
      changeItemsPerPage(itemsPerPage) {
        this.itemsPerPage = itemsPerPage;
        this.displayBooks();
      },
      displayBooks() {
        $.ajax({
          url: "/book/getBooksByPage",
          type: "GET",
          data: {
            page: this.currentPage,
            limit: this.itemsPerPage
          },
          success: (data) => {
            this.books = data;
          }
        });
      },

      displayAvailableBooks() {
        $.ajax({
          url: "/book/getAvailableBooks",
          type: "GET",
          success: (data) => {
            this.books = data;
          }
        });
      },
      displayUnavailableBooks() {
        $.ajax({
          url: "/book/getUnavailableBooks",
          type: "GET",
          success: (data) => {
            this.books = data;
          }
        });
      },
      deleteBook(book) {
        if (confirm("确定要删除该图书吗？")) {
          $.ajax({
            url: "/book/deleteBook",
            type: "DELETE",
            data: JSON.stringify(book),
            dataType: "JSON",
            contentType: "application/json;charset/utf-8",
            success: (json) => {
              console.log(json);
              const index = this.books.indexOf(book);
              if (index !== -1) {
                this.books.splice(index, 1);
              }
            }
          });
        }
      },
      showAddBookModal() {
        this.showAddBook = true; // 显示添加图书模态框
        this.$nextTick(() => {
          const modal = document.querySelector('.modal2');
          modal.style.display = 'flex';
        });
      },
      addBook() {
        const existingBookIndex = this.books.findIndex(book => book.title === this.newBook.title);
        if (existingBookIndex !== -1) {
          // 已存在相同标题的图书，更新库存量
          const existingBook = this.books[existingBookIndex];
          existingBook.stock = parseInt(existingBook.stock) + parseInt(this.newBook.stock);

          // 发送AJAX请求更新图书的库存量
          $.ajax({
            url: "/book/updateBook",
            type: "PUT",
            data: JSON.stringify(existingBook),
            dataType: "JSON",
            contentType: "application/json;charset/utf-8",
            success: (json) => {
              console.log(json);
            }
          });
        } else {
          // 图书不存在，将其添加到列表中
          $.ajax({
            url: "/book/addBook",
            type: "POST",
            data: JSON.stringify(this.newBook),
            dataType: "JSON",
            contentType: "application/json;charset/utf-8",
            success: (json) => {
              console.log(json);
              this.displayBooks();
            }
          });
        }

        // 重置表单和模态框状态
        this.newBook = {
          title: '',
          author: '',
          publisher: '',
          stock: '',
          description: '',
          categoryId: ''
        };
        this.showAddBook = false;
      },
      cancelAddBook() {
        // 取消添加图书，重置表单和模态框状态
        this.newBook = {
          title: '',
          author: '',
          publisher: '',
          stock: '',
          description: ''
        };
        this.showAddBook = false;

        this.$nextTick(() => {
          const modal = document.querySelector('.modal2');
          modal.style.display = 'none';
        });
      },
      startEditing(book) {
        this.tempBook = JSON.parse(JSON.stringify(book));
        this.editingBook = book;
        this.showModal();
      },
      saveBookChanges() {
        // 发送更新图书信息的AJAX请求
        $.ajax({
          url: "/book/updateBook",
          type: "PUT",
          data: JSON.stringify(this.tempBook),
          dataType: "JSON",
          contentType: "application/json;charset/utf-8",
          success: (json) => {
            if(json.state == 200){
              console.log(json);
              // 更新图书列表中对应的图书信息
              const index = this.books.findIndex((b) => b.title === this.editingBook.title);
              if (index !== -1) {
                this.books.splice(index, 1, this.tempBook);
              }

              // 清空编辑状态
              this.editingBook = null;
              this.tempBook = null;
              this.hideModal();
            }else{
              alert("图书名暂不支持修改！！！")
            }

          }
        });
      },
      cancelEdit() {
        this.editingBook = null;
        this.tempBook = null;
        this.hideModal();
      },
      showModal() {
        this.$nextTick(() => {
          const modal = document.querySelector('.modal');
          modal.style.display = 'flex';
        });
      },
      hideModal() {
        this.$nextTick(() => {
          const modal = document.querySelector('.modal');
          modal.style.display = 'none';
        });
      }
    },
    mounted() {
      this.displayBooks();
    }
  });
</script>

</body>
</html>
